import React from 'react';
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios/index'
import Utils from './../../utils/utils'
import './index.less'
import Children from './children'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import printJS from 'print-js'


export default class BasicTables extends React.Component{
    state = {
        visible: false
    }
    params = {
        page: 1
    }
    componentDidMount(){
        const dataSource = [   //数据源
            {
                id: '0',
                userName: 'Elena',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2019-01-01',
                address: '西虹市海淀区桃花公园',
                time: '07:00'
            },
            {
                id: '1',
                userName: 'Mary',
                sex: '1',
                state: '2',
                interest: '3',
                birthday: '2019-01-01',
                address: '西虹市海淀区桃花公园',
                time: '07:00'
            },
            {
                id: '2',
                userName: 'Tom',
                sex: '2',
                state: '3',
                interest: '4',
                birthday: '2019-01-01',
                address: '西虹市海淀区桃花公园',
                time: '07:00'
            }
        ]
        dataSource.map((item, index) => {
            item.key = index;
        })
        this.setState({
            dataSource
        })
    }
    // getPdf = () => {
    //     const divContents = document.getElementById('pdfCon').innerHTML
    //     const printWindow = window.open()
    //     printWindow.document.write('<html><head>')
    //     printWindow.document.write('<title>Print View</title>')
    //     printWindow.document.write('</head><body>')
    //     printWindow.document.write(divContents)
    //     printWindow.document.write('</body></html>')
    //     printWindow.print()
    //     printWindow.close()
    // }

      // 非跨域图片处理
    // getPdf = () => {
    //     const element = document.getElementById("pdfCon");
    //     // html2canvas将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现
    //     html2canvas(element).then((canvas) => {
    //       const imgSrc = canvas.toDataURL('image/png') // 把canvas转为base64图片
    //       const iframe = document.createElement('IFRAME')
    //       iframe.setAttribute('style', 'width:0px;height:0px;') // 设置iframe不可见
    //       document.body.appendChild(iframe)
    //       const printObj = iframe.contentWindow
    //       const doc = printObj.document
    //       doc.open()
    //       // 将目标区域的html写入iframe
    //       doc.write(`<img id="imgDom" src="${imgSrc}" alt="">`)
    //       // 必须加上，不然ie没发调出打印的弹框,关闭iframe，释放内存，防止内存泄漏
    //       doc.close()
    //       // 样式插入进去
    //       const style = doc.createElement('style')
    //       style.innerText = '@media print{@page{size: auto A4 landscape;margin: 0;} body{margin: 0 0px}}'
    //       doc.getElementsByTagName('head')[0].appendChild(style)
    //       setTimeout(() => {
    //         printObj.print()
    //         const iframeDom = document.body.getElementsByTagName('iframe')
    //         iframeDom.length > 0 && document.body.removeChild(iframeDom[0])
    //       }, 500)
    //     })
    //   }


      // 跨域图片处理
    // getPdf = () => {
    //     const el = document.getElementById('pdfCon'); // 局部打印区域
    //     if (!el) return;

    //     // 创建iframe打印预览
    //     const iframe = document.createElement('IFRAME');
    //     let doc = null;

    //     // 兼容火狐浏览器 解决iframe的src是about:blank 内容是空白的问题
    //     iframe.setAttribute('src', 'javascript:');
    //     iframe.setAttribute(
    //         'style',
    //         'position:absolute;width:0px;height:0px;left:500px;top:500px;',
    //     );
    //     document.body.appendChild(iframe);

    //     // 找到打印区域的iframe 获取内部canvas 转换成图片 添加到iframe前 隐藏iframe
    //     const iframes = el.querySelectorAll('iframe');
    //     iframes.forEach(item => {
    //         const itemChild = item.contentDocument.body.querySelector('canvas');
    //         if (itemChild) {
    //         const image = new Image();
    //         image.src = itemChild.toDataURL('image/png');
    //         image.setAttribute('width', item.offsetWidth);
    //         image.setAttribute('height', item.offsetHeight);
    //         image.style.width = item.offsetWidth + 'px';
    //         image.style.height = item.offsetHeight + 'px';
    //         item.parentElement.insertBefore(image, item);
    //         item.style.display = 'none';
    //         }
    //     });

    //     // 处理完所有iframe html2canvas转换一次el打印区域 得到的canvas转换成图片 赋值给打印iframe
    //     if (iframe.contentWindow) {
    //         doc = iframe.contentWindow.document;

    //         html2canvas(el, {
    //         scale: 2,
    //         allowTaint: true,
    //         useCORS: true,
    //         width: el.offsetWidth,
    //         // height: el.offsetHeight,
    //         windowWidth: el.scrollWidth,
    //         windowHeight: el.scrollHeight,
    //         }).then(canvas => {
    //         const context = canvas.getContext('2d');
    //         context.mozImageSmoothingEnabled = false;
    //         context.webkitImageSmoothingEnabled = false;
    //         context.msImageSmoothingEnabled = false;
    //         context.imageSmoothingEnabled = false;
    //         const src64 = canvas.toDataURL();
    //         const contentWidth = canvas.width;
    //         const contentHeight = canvas.height;
    //         const imgWidth = el.clientWidth; // 根据打印区域宽度设定
    //         const imgHeight = (imgWidth / contentWidth) * contentHeight;
    //         const img = new Image();
    //         const div = document.createElement('div');
    //         div.appendChild(img);
    //         img.setAttribute('src', src64);
    //         img.setAttribute('width', imgWidth);
    //         img.setAttribute('height', imgHeight);
    //         img.setAttribute('id', 'imgs');
    //         document.body.appendChild(div);
    //         doc.open();
    //         doc.write(div.innerHTML);
    //         doc.close();

    //         // 图片加载完毕获取iframe的焦点调取打印
    //         img.onload = () => {
    //             // ，从iframe开始打印
    //             iframe.contentWindow.focus();
    //             iframe.contentWindow.print();

    //             // 删除所有img 显示iframe
    //             iframes.forEach((item, index) => {
    //             const imgNode = item.parentElement.querySelector('img');
    //             imgNode && item.parentElement.removeChild(imgNode);
    //             item.style.display = 'block';
    //             });
    //             document.body.removeChild(div);
    //         };
    //         });
    //     }

    //     if (navigator.userAgent.indexOf('MSIE') > 0) {
    //         document.body.removeChild(iframe);
    //     }

    // }

    // getPdf = () => {
    //     // const aaa = document.getElementById('pdfCon')
    //     // window.print('pdfCon')
    //     // printJS({printable: 'pdfCon',type: 'html'})
    //     let bdhtml=window.document.body.innerHTML; 
    //     let wwdhtml=window.document.getElementById('pdfCon').innerHTML; 
    //         window.document.body.innerHTML=wwdhtml; //把需要打印的指定内容赋给body.innerHTML
    //         window.print(); //调用浏览器的打印功能打印指定区域
    //         window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
    //         window.location.reload();
    // }


    getPdf = () => {
        const pdfDom = document.getElementById('pdfCon')
        html2canvas(pdfDom, {useCORS: true,}).then(canvas=> {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            var pageHeight = contentWidth / 595.28 * 841.89;  //一页pdf显示html页面生成的canvas高度;
            var leftHeight = contentHeight;  //未生成pdf的html页面高度
            var position = 0;  //pdf页面偏移
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 555.28;
            var imgHeight = 555.28 / contentWidth * contentHeight;
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            var pdf = new jsPDF('', 'pt', 'a4');
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
            } else {
            while (leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                    pdf.addPage();
                }
            }
            }
            pdf.save('content.pdf');
        }) 
      }

    render(){
        const columns = [
             {
                 title: 'id',   //表头标题
                 dataIndex: 'id' //数据源
             },
             {
                 title: '用户名',
                 dataIndex: 'userName'
             },
             {
                title: '性别',
                dataIndex: 'sex',
                render(sex){
                    return sex === 1 ? '男' : '女'
                }
             },
             {
                title: '状态',
                dataIndex: 'state',
                render(state){
                    let config = {
                        '1': '咸鱼一条',
                        '2': '人民公仆',
                        '3': '医院护士',
                        '4': '科技公司FE',
                        '5': '创业者'
                    }
                    return config[state]
                }
             },
             {
                title: '爱好',
                dataIndex: 'interest',
                render(abc){
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[abc]
                }
             },
             {
                title: '生日',
                dataIndex: 'birthday'
             },
             {
                title: '地址',
                dataIndex: 'address'
             },
             {
                title: '早起时间',
                dataIndex: 'time'
             }       
        ]
        return (
            <div>
                <Button type="primary" onClick={() => this.setState({visible: true})}>
                    Open Modal
                </Button>
                <Card title="基础表格">
                    <Table 
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Modal
                    width="400"
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.getPdf}
                    okText="打印"
                    onCancel={() => this.setState({visible: false})}
                    >
                    <div id="pdfCon" className='modalBox'>
                        <Children  />
                    </div>
                </Modal>
            </div>
        )
    }
}